import React, {Component} from 'react';
import {browserHistory} from 'react-router'
import {Form, Input, Button, notification, Icon, message, Card} from 'antd'
import {post} from '../../my_axios/api'
import Cookies from 'js-cookie';
import './login.less';
import {connect} from 'react-redux'
import createHistory from 'history/createHashHistory'

const history = createHistory();
const FormItem = Form.Item

class LoginPage extends React.Component {
    handleSubmit = (e) => {
        e.preventDefault();
        let n = this.props.form.getFieldsValue().username
        let p = this.props.form.getFieldsValue().password
        let params = {
            username: n,
            password: p
        };
        post('token/get', params).then(res => {
            if (res.status === 'success') {
                window.localStorage.setItem('token', res.data.token_type + " " + res.data.access_token);
                Cookies.set('user', res.data.user.name, {expires: 1});
                //登录成功跳转
                history.push('/admin/home')
            } else {
                message.error(res.data.message);
            }
        }).catch(err => {
            console.log(err);
        });
    };

    componentDidMount() {

    }

    render() {
        const {getFieldDecorator} = this.props.form

        return (
            <div className="loginpagewrap">
                {/*<div className="loginWrap">*/}
                  {/**/}


                {/*</div>*/}
                <Card title='欢迎登录' className="login_card" bodyStyle={{padding:30}}>
                    <Form onSubmit={this.handleSubmit}>
                        <div>{this.props.token}</div>
                        <FormItem>
                            {getFieldDecorator('username', {
                                rules: [{required: true, message: '请输入用户名'}],
                            })(
                                <Input prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                       placeholder="Username"/>
                            )}
                        </FormItem>
                        <FormItem>
                            {getFieldDecorator('password', {
                                rules: [{required: true, message: '请输入密码'}],
                            })(
                                <Input prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                                       type="password" placeholder="Password"/>
                            )}
                        </FormItem>
                        <Button type="primary" htmlType="submit" className="loginBtn">登录</Button>
                    </Form>

                </Card>
            </div>
        )
    }
}

let Login = Form.create()(LoginPage);
const map = (state) => {
    return {
        menuName: state.menuName
    }
}
export default connect(map)(Login);